import { useEffect, useState } from "react";
import { Modal, Segmented } from "antd";
import carIcon from "assets/imgs/carIcon.png";
import { getCarLine } from "api/carLine";
import "./index.css";

/**
 * @param {*} isModalOpen 模态框是否关闭
 * @param {*} closeModal  关闭模态框方法
 * @param {*} OpenTravel 开始运动轨迹方法
 */
export default function DetailsModal({ isModalOpen, closeModal, OpenTravel }) {
  const BMapGL = window.BMapGL;
  const BMapGLLib = window.BMapGLLib;
  const [lushuInstance, setLushuInstance] = useState(null);
  const [segmentValue, setSegmentValue] = useState(0);
  useEffect(() => {
    if (segmentValue === "2") {
      let map = new BMapGL.Map("map_Lushu");
      map.enableScrollWheelZoom();
      map.enableScrollWheelZoom();
      map.setTilt(73);
      (async () => {
        let resArr = await getCarLine({
          equipmentNo: "90288400005",
          startTime: "2020-02-22",
          endTime: "2023-02-22",
        });
        // 转换坐标
        let pointArr = [];
        resArr.forEach((element) => {
          pointArr.push(new BMapGL.Point(element.longitude, element.latitude));
        });
        // 添加视图
        map.addOverlay(new BMapGL.Polyline(pointArr, { strokeColor: "red" }));
        // 调整视图设置视图最佳位置
        map.setViewport(pointArr);
        let lushu = new BMapGLLib.LuShu(map, pointArr, {
          defaultContent: "出发啦", // "信息窗口文案"
          // autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
          speed: 300,
          icon: new BMapGL.Icon(carIcon, new BMapGL.Size(30, 30)),
        });
        setLushuInstance(lushu);
      })();
    }
  }, [segmentValue]);

  const handleFly = () => {
    lushuInstance.start();
  };

  /**
   * 处理Segmented点击
   */
  const handleSegmentChange = (e) => {
    setSegmentValue(e);
  };

  /**
   * 发送通知请求开启运行轨迹
   */
  const sendOpenTravel = () => {
    OpenTravel();
  };

  return (
    <Modal
      title="详情信息"
      open={isModalOpen}
      onOk={closeModal}
      onCancel={closeModal}
      centered
      width={"50%"}
      bodyStyle={{ height: "600px" }}
    >
      <div className="box-container">
        <div className="left-box">
          <div>图片信息</div>
          <h3>粤AAJ452</h3>
          <p>
            <span>信息描述一</span>
            <span>信息描述二</span>
            <span>信息描述三</span>
          </p>
          <button onClick={sendOpenTravel}>运行轨迹</button>
        </div>
        <div className="right-box">
          <Segmented
            block
            options={[
              { label: "信息展示", value: "0" },
              { label: "不明展示", value: "1" },
              { label: "运行轨迹", value: "2" },
            ]}
            onChange={handleSegmentChange}
          />
          {segmentValue === "2" ? (
            <>
              <div
                style={{ width: "100%", height: "70%" }}
                id="map_Lushu"
              ></div>
              <button onClick={handleFly}>起飞啦</button>
            </>
          ) : null}
        </div>
      </div>
    </Modal>
  );
}
